<template>
  <view class="wrap">
    <view class="search-bar">
      <picker mode="multiSelector" :range="shopTypes" @change="onMultiSelectorChange" @columnchange="onColumnChange">
        <view>{{shopTypeStr || '选择类型'}}<text class="iconfont icon-xingzhuang"></text></view>
      </picker>
      <view class="search">
        <text class="iconfont icon-sousuo"></text>
        <input type="text" confirm-type="search" placeholder="搜索商家、商品名称" v-model.trim="searchText" @confirm="onSearch"/>
        <text class="iconfont icon-biaoqianhuashucha1" @click="onClear" v-if="searchText"></text>
       </view>
    </view>
<!-- <view class="sort-bar">
            <view class="item">
            </view>
          </view> -->
    <view class="list">
      <view class="item" v-for="item in list" v-key="item.id" @click="toShopDetail(item.id)">
        <image :src="item.logo" mode="aspectFill"></image>
        <view class="content">
           <view class="name ellipsis-2">{{item.shopName}}</view>
           <view class="num">
             商品数: {{item.goodsCounts}}
           </view>
           <view class="distance">
             <block v-if="item.points > 0">
               {{item.points}}积分
             </block>
             <text>{{item.distance}}</text>
           </view>
        </view>
      </view>
    </view>
    <view class="no-data">{{payload.hasmore ? '数据加载中...' : '暂无更多数据'}}</view>
    <tab-menu :current="1"/>
  </view>
</template>

<script>  
  import {Shop} from '../../apis/index.js'
  import {utils} from '../../utils/index.js'
  import TabMenu from '@/components/tab-menu.vue'
  
  export default {
    components: {TabMenu},
    data: function() {
      return {
        typeId: '',
        isLoading: false,
        searchText: '',
        msg: 'Hello World',
        list: [],
        shopTypeStr: '选择类型',
        menuList: [],
        payload: {
          hasmore: true,
          pageSize: 10,
          current: 1
        },
        shopTypes: [[], []],
        shopTypes_: [],
      }
    },
    methods: {
      onSearch () {
        this.payload.hasmore = true
        this.payload.current = 1
        getList.call(this)
      },
      onClear () {
        console.log('====')
        this.searchText = ""
        this.onSearch()
      },
      toShopDetail (id) {
        utils.routerTo('/pages/shopDetail/shopDetail?id=' + id)
      },
      onMultiSelectorChange (e) {
         console.log('发生变化：', e)
         const [parentIndex=0, index=0] = e.detail.value
         this.shopTypeStr = `${this.shopTypes_[parentIndex].title}-${this.shopTypes_[parentIndex].list[index].title}`
         this.tempStr = this.shopTypes_[parentIndex].list[index].id
         this.typeId = this.tempStr
         // 重新获取数据
         this.payload.hasmore = true
         this.payload.current = 1
         getList.call(this)
      },
      onColumnChange (e) {
        const {column, value} = e.detail
        if (column === 0) {
          let shopTypes = this.shopTypes
          
          shopTypes[1] = this.shopTypes_[value].list.map(item => item.title)
          console.log(shopTypes)
          this.shopTypes = shopTypes
          this.$mp.page.setData({
            shopTypes
          })
        }
        console.log('列发生变化', e)
        
      },
      onSelectType (i, j, id) {
        console.log('选择了')
        console.log([i, j, id])
      }
    },
    onLoad (options) {
      if (options.typeId) this.typeId = options.typeId
      getList.call(this)
      getShopTypes.call(this).then(res => options.typeId && getShopTypeById.call(this, +options.typeId))
    },
    onPullDownRefresh () {
      this.payload.hasmore = true
      this.payload.current = 1
      getList.call(this)
    },
    onReachBottom() {
      if (this.payload.hasmore) {
        this.payload.current += 1
        getList.call(this)
      }
    }
  }
  
  function getShopTypes () {
    return Shop.getShopTypes({
      data: {
        request: {},
        pagination: {},
        form: {}
      }
    }).then(res => {
      console.log('获取店铺类型成功')
      console.log(res.data)
      let types = [[], []]
      types[0] = res.data.body.map(item => item.title)
      types[1] = res.data.body[0].list.map(item => item.title)
      this.shopTypes = types
      this.shopTypes_ = res.data.body
    })
  }
  
  function getList () {
    let userInfo = uni.getStorageSync('userInfo')
    if (this.isLoading) return
    this.isLoading = true
    utils.wxLoading()
    Shop.getShopList({
      data: {
        query: {
          userId: userInfo.id,
          title: this.searchText,
          status: 2,
          typeId: this.typeId
        },
        pagination: {
          current: this.payload.current,
          pageSize: this.payload.pageSize
        }
      }
    }).then(res => {
      console.log('获取店铺列表成功')
      console.log(res.data)
      this.isLoading = false
      uni.stopPullDownRefresh()
      uni.hideLoading()
      if (res.data.code === 200) {
        // 计算与当前位置的距离
        const location = uni.getStorageSync('location')
        if (location) {
          res.data.body.map(item => {
            item.distance = utils.getDistance(item.latitude, item.longitude, location.latitude, location.longitude)
          })
        }
        // utils.wxToastSuccess()
        this.list = this.payload.current === 1 ? res.data.body : this.list.concat(res.data.body)
        this.payload.hasmore = res.data.body.length === this.payload.pageSize
      } else {
        utils.wxToastFail()
      }
    }, err => {
      uni.stopPullDownRefresh()
      console.error('获取店铺列表失败')
      console.error(err)
      this.isLoading = false
      uni.hideLoading()
    })
  }
  
  function getShopTypeById (id) {
    this.shopTypes_.map(item => {
      if (item.id === id) {
        this.shopTypeStr = item.title
      }
      item.list.map(type => {
        console.log(type.id, id);
        if (type.id === id) {
          this.shopTypeStr = `${item.title}-${type.title}`
        }
      })
    })
  }
</script>

<style lang="scss">
  .wrap {
    box-sizing: border-box;
    padding-bottom: 100rpx;
    .search-bar {
      height: 70rpx;
      display: flex;
      box-sizing: border-box;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: #333333;
      align-items: center;
      .icon-xingzhuang {
        font-size: 14rpx;
        padding-left: 10rpx;
      }
      .search {
        flex: 1;
        border: #efefef 1rpx solid;
        border-radius: 5rpx;
        margin-left: 10rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10rpx;
        input {
          box-sizing: border-box;
          padding: 0 20rpx;
          flex: 1;
        }
      }
    }
    .list {
      box-sizing: border-box;
      padding: 0 20rpx;
      .item {
        box-sizing: border-box;
        padding: 20rpx 0;
        display: flex;
        image {
          width: 160rpx;
          height: 160rpx;
          background-color: #CCC;
          border-radius: 10rpx;
          flex-shrink: 0;
        }
        .content {
          flex: 1;
          font-size: 28rpx;
          padding-left: 20rpx;
          .name {
            height: 84rpx;
          }
          .num {
            color: #888;
            line-height: 1.5;
          }
          .distance {
            color: #ED1709;
            text {
              color: #888;
              float: right;
            }
          }
        }
        &+.item {
          border-top: #efefef 1rpx solid;
        }
      }
    }
    .no-data {
      color: #999999;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      font-size: 28rpx;
    }
  }
</style>
